<template>
  <div id="" class="areaListDiv">
    <div class="flexcell">
      <ul>
        <li :class="{'active':isDistance}" @click="showDistance">附近</li>
        <li :class="{'active':isArea}" @click="showArea">区域</li>
      </ul>
    </div>
    <div class="areaDiv" v-if="isArea">
      <div class="flexcell region">
        <ul>
          <li v-for="(item,index) in childArea"
          :key="item.key"
          :class="{'active':childIdx==index}"
          @click="chooseAreaCK(index)">
            {{item.areaName}}
          </li>
        </ul>
      </div>
    </div>
    <div class="areaDiv region" v-if="isDistance" style="padding-left:20px;">
      <ul>
        <li v-for="(item,index) in distance"
        :key="item.key"
        :class="{'active':disIdx==index}"
        @click="chooseDis(index)">
          {{item.areaName}}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapState,mapMutations } from 'Vuex';
export default {
  name: "",
  data: () => ({
    distance:[
      {
        areaName:'不限',
        id:0
      },
      {
        areaName:'1000m内',
        id:1
      },
      {
        areaName:'3000m内',
        id:3
      },
      {
        areaName:'5000m内',
        id:5
      }
    ],
    disIdx:0,
    childArea:[{
      areaName:'不限',
      areaId:0,
    }],
    // childChildArea:[],
    childIdx:0,
    // childChildIdx:0,
    isArea:true,
    isDistance:false,
    chooseName:'',    //选择的名称，显示在父组件上
    chooseArea:'',    //选中的区域，显示在父组件上
    chooseType:1,     //选择的类型：0 附近；1 区域;传递给父组件，以请求房源列表
  }),
  computed: {
    ...mapState({
      openCity:state=>state.house.openCity,
    })
  },
  methods: {

    // 获取区域列表
    getArea(areaId,callback){
      var cityParam = {
        parentId:areaId
      }
      network.get(configUrl.AREALISTBYPID_URL,cityParam,function (res) {
        console.log(res);
        var cityList = res.dataList
        callback(cityList);

      },function (error) {
        console.log(error);
      });
    },
    // 选择区域
    chooseAreaCK(index) {
      var that = this;
      that.childIdx = index;
      var chooseArea = that.childArea[index];   //存储当前选择的区域对象
      // 传递给父组件
      that.$emit('areaEvent',{
        chooseType:that.chooseType,
        chooseArea:chooseArea
      });
      // this.getChildCity();
    },
    // 选择附近距离
    chooseDis(index){
      var that =this;
      that.disIdx = index;
      var chooseArea = that.distance[index];    //存储当前选择的距离
      // 传递给父组件
      that.$emit('areaEvent',{
        chooseType:that.chooseType,
        chooseArea:chooseArea
      });
    },
    // 选择区域
    showArea(){
      this.isArea = true;
      this.isDistance = false;
      this.chooseName = '区域';
      this.chooseType = 1;
    },
    // 选择距离
    showDistance(){
      this.isArea = false;
      this.isDistance = true;
      this.chooseName = '附近';
      this.chooseType = 0;
    }
  },
  mounted() {
    //do something after mounting vue instance
    var that = this;
    // 获取开通城市
    // var openCity = that.global.global.openCity;   //当前选择的开通城市
    console.log(that.openCity);
    var childAreaArr = that.childArea;
    // 根据父id获取子区域列表
    this.getArea(that.openCity.areaId,function(cityList){
      that.childArea = childAreaArr.concat(cityList);
    });
  }
}
</script>
<style lang="scss" scoped>

.areaListDiv{
  @include flex;
  align-items: flex-start;
  background: white;
  line-height: 40px;
  height: 60%;
  overflow: hidden;
  .flexcell{
    @include flexcell;
    padding-left: 20px;
    height: 100%;
    ul{
      height: 100%;
      overflow-y: scroll;
    }

  }
  .areaDiv{
    @include flex;
    flex: 2;
    align-items: flex-start;
    height: 100%;
  }
  .region{
    background: $eeeColor;
  }
  li.active{
    color: $greenColor;
  }
}
</style>
